<!DOCTYPE>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <style>
        .sel_mask{                    /*将<a></a>相对定位*/
            position:relative;
            width:200px;
            height:25px;
            background:#24A0D8;
            border-radius: 5px;
            box-shadow:1px 1px 5px #169BD5;
            display:inline-block;
            text-decoration: none;
        }
        .sel_mask:hover{         /*添加hover效果*/
            background:#169BD5;
        }
        .sel_mask select{        /*以相同大小将<select></select>绝对定位*/
            top:0px;
            left:0px;
            position:absolute;
            width:200px;
            height:25px;
            opacity:0;
        }
        .sel_mask select option[selected]{
            font-weight:bold
        }
        .sel_mask select option:nth-child(even) {
            background-color:#A7DAEF;
        }
        .sel_mask select option{
            color:#EA5400;
        }
        .sel_mask span{     /*显示内容*/
            position: absolute;
            top:3px;
            left:5px;
            right: 20px;
            display: inline-block;
            color:#fff;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
        }
        .sel_mask img{          /*箭头图标*/
            display: inline-block;
            position: absolute;
            top:2px;
            right: 5px;
        }

        h1 {
            font-size: 20px;
            line-height: 30px;
        }

        h2 {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 10px;
        }

        a {
            text-decoration: none;
            color: #2dc4b2;
        }

        #console {
            position: absolute;
            width: 300px;
            top: 30px;
            margin: 10px;
            padding: 10px 20px;
            background-color: white;
        }

        .session {
            margin-bottom: 20px;
        }

        .row {
            display: block;
            height: 12px;
            width: 100%;
        }

        .colors {
            background: linear-gradient(to right, #2dc4b2, #3bb3c3, #669ec4, #8b88b6, #a2719b, #aa5e79);
            margin-bottom: 5px;
        }

        .label {
            width: 15%;
            display: inline-block;
            text-align: center;
        }

    </style>
</head>
<body>
<a href="javascript:void(0)"  class="sel_mask"><span>请选择</span><img src="image/down.png"/>
    <select  class="sel">
        <option>请选择</option>
        <option>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
        <option>选项四</option>
        <option>选项五</option>
        <option>选项六</option>
        <option>选项七</option>
    </select>
</a>
<script>
    $(function () {
        $('.sel').change(function () {    // 选择后替换内容并恢复箭头方向
            $('span').html($('.sel').find('option:selected').html());
            $('.sel_mask').find('img').attr('src','image/down.png');
        })
        $('.sel').blur(function () {      //什么也不选恢复箭头方向
            $('.sel_mask').find('img').attr('src','image/down.png');
        })
        $('.sel').click(function(){     // 点击后更改箭头方向
            $('.sel_mask').find('img').attr('src','image/up.png');
        })
    })
</script>

<div id="console">
    <h1>控制面板测试</h1>
    <p>data from nyc</p>
    <div class='session'>
        <h2>Casualty</h2>
        <div class='row colors'>
        </div>
        <div class='row  labels'>
            <div class='label'>0</div>
            <div class='label'>1</div>
            <div class='label'>2</div>
            <div class='label'>3</div>
            <div class='label'>4</div>
            <div class='label '>5+</div>
        </div>
    </div>

    <div class="session" id="sliderbar">
        <input type="range" id="slider" class="row" min="2" max="8" step="1" value="2" oninput="getVal()">
        <label id="getsth">2</label>
    </div>

    <div class='session'>
        <h2>Day of the week</h2>
        <div class='row' id='filters'>
            <input id='all' type='radio' name='toggle' value='all' checked='checked'>
            <label for='all'>All</label>
            <input id='weekday' type='radio' name='toggle' value='weekday'>
            <label for='weekday'>Weekday</label>
            <input id='weekend' type='radio' name='toggle' value='weekend'>
            <label for='weekend'>Weekend</label>
        </div>
    </div>
</div>
<script>
    document.getElementById('slider').addEventListener('input', function(e) {
        var hour = parseInt(e.target.value);
        // update the map
        map.setFilter('collisions', ['==', ['number', ['get', 'Hour']], hour]);

        // converting 0-23 hour to AMPM format
        var ampm = hour >= 12 ? '下午' : '上午';
        var hour12 = hour % 12 ? hour % 12 : 12;

        // update text in the UI
        document.getElementById('active-hour').innerText = hour12 + ampm;
    });
    function getVal() {
        document.getElementById('getsth').innerHTML = document.getElementById('slider').value;
    }
</script>
</body>
</html>